<template>
  <div class="articles-container">
    <!-- 文章列表头部 -->
    <div class="articles-header">
      <div class="header-filters">
        <div class="filter-tabs">
          <button 
            v-for="tab in filterTabs" 
            :key="tab.id"
            :class="['filter-tab', { active: currentTab === tab.id }]"
            @click="switchTab(tab.id)"
          >
            <i :class="tab.icon"></i>
            {{ tab.name }}
          </button>
        </div>

        <div class="sort-options">
          <el-select v-model="sortBy" placeholder="排序方式">
            <el-option
              v-for="option in sortOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            >
              <i :class="option.icon"></i>
              {{ option.label }}
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="tag-filters">
        <span 
          v-for="tag in popularTags" 
          :key="tag.id"
          :class="['tag', { active: selectedTags.includes(tag.id) }]"
          @click="toggleTag(tag.id)"
        >
          {{ tag.name }}
          <span class="tag-count">{{ tag.count }}</span>
        </span>
      </div>
    </div>

    <!-- 文章列表 -->
    <div class="articles-list">
      <div 
        v-for="article in filteredArticles" 
        :key="article.id"
        class="article-card"
        @click="viewArticle(article.id)"
      >
        <div class="article-meta">
          <div class="author-info">
            <el-avatar :src="article.author.avatar" :size="40"></el-avatar>
            <div class="author-details">
              <span class="author-name">{{ article.author.name }}</span>
              <span class="post-time">{{ formatTime(article.createTime) }}</span>
            </div>
          </div>
          <div class="article-stats">
            <span class="stat">
              <i class="fas fa-eye"></i>
              {{ formatNumber(article.views) }}
            </span>
            <span class="stat">
              <i class="fas fa-comment"></i>
              {{ article.comments }}
            </span>
            <span class="stat">
              <i class="fas fa-heart"></i>
              {{ article.likes }}
            </span>
          </div>
        </div>

        <div class="article-content">
          <h2 class="article-title">{{ article.title }}</h2>
          <p class="article-excerpt">{{ article.excerpt }}</p>
          
          <div class="article-cover" v-if="article.cover">
            <img :src="article.cover" :alt="article.title">
          </div>

          <div class="article-tags">
            <span 
              v-for="tag in article.tags" 
              :key="tag"
              class="tag"
            >#{{ tag }}</span>
          </div>
        </div>

        <div class="article-footer">
          <div class="category-tag">
            <i :class="getCategoryIcon(article.category)"></i>
            {{ article.category }}
          </div>
          <button class="read-more">
            阅读全文
            <i class="fas fa-arrow-right"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 分页器 -->
    <div class="pagination-wrapper">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalArticles"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </div>

    <!-- 右侧悬浮工具栏 -->
    <div class="floating-toolbar">
      <button class="toolbar-btn" @click="scrollToTop">
        <i class="fas fa-arrow-up"></i>
      </button>
      <button class="toolbar-btn" @click="refreshList">
        <i class="fas fa-sync-alt"></i>
      </button>
      <button class="toolbar-btn write-btn" @click="startWriting">
        <i class="fas fa-pen"></i>
        写文章
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Articles',
  
  data() {
    return {
      currentTab: 'all',
      sortBy: 'latest',
      selectedTags: [],
      currentPage: 1,
      pageSize: 10,
      articles: [],
      totalArticles: 0,
      
      filterTabs: [
        { id: 'all', name: '全部', icon: 'fas fa-th-large' },
        { id: 'featured', name: '精选', icon: 'fas fa-star' },
        { id: 'following', name: '关注', icon: 'fas fa-heart' },
        { id: 'latest', name: '最新', icon: 'fas fa-clock' }
      ],
      
      sortOptions: [
        { value: 'latest', label: '最新发布', icon: 'fas fa-clock' },
        { value: 'popular', label: '最多阅读', icon: 'fas fa-fire' },
        { value: 'comments', label: '最多评论', icon: 'fas fa-comments' }
      ],
      
      popularTags: [
        { id: 1, name: 'JavaScript', count: 1234 },
        { id: 2, name: 'Vue.js', count: 856 },
        { id: 3, name: 'React', count: 654 },
        { id: 4, name: 'Node.js', count: 432 }
      ]
    }
  },
  
  computed: {
    filteredArticles() {
      let result = [...this.articles];
      
      // 标签筛选
      if (this.selectedTags.length > 0) {
        result = result.filter(article => 
          article.tags.some(tag => this.selectedTags.includes(tag))
        );
      }
      
      // 排序
      switch (this.sortBy) {
        case 'popular':
          result.sort((a, b) => b.views - a.views);
          break;
        case 'comments':
          result.sort((a, b) => b.comments - a.comments);
          break;
        default:
          result.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
      }
      
      return result;
    }
  },
  
  methods: {
    async fetchArticles() {
      try {
        const response = await this.axios.get('/api/community/articles', {
          params: {
            page: this.currentPage,
            pageSize: this.pageSize,
            tab: this.currentTab,
            sort: this.sortBy,
            tags: this.selectedTags.join(',')
          }
        });
        
        if (response.data.code === 200) {
          this.articles = response.data.data.list;
          this.totalArticles = response.data.data.total;
        }
      } catch (error) {
        console.error('获取文章列表失败:', error);
        this.$message.error('获取文章列表失败');
      }
    },
    
    switchTab(tabId) {
      this.currentTab = tabId;
      this.currentPage = 1;
      this.fetchArticles();
    },
    
    toggleTag(tagId) {
      const index = this.selectedTags.indexOf(tagId);
      if (index > -1) {
        this.selectedTags.splice(index, 1);
      } else {
        this.selectedTags.push(tagId);
      }
      this.currentPage = 1;
      this.fetchArticles();
    },
    
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchArticles();
    },
    
    formatNumber(num) {
      return num > 1000 ? (num/1000).toFixed(1) + 'k' : num;
    },
    
    formatTime(time) {
      const date = new Date(time);
      const now = new Date();
      const diff = now - date;
      
      if (diff < 60000) { // 小于1分钟
        return '刚刚';
      } else if (diff < 3600000) { // 小于1小时
        return `${Math.floor(diff / 60000)}分钟前`;
      } else if (diff < 86400000) { // 小于1天
        return `${Math.floor(diff / 3600000)}小时前`;
      } else {
        return date.toLocaleDateString();
      }
    },
    
    getCategoryIcon(category) {
      const icons = {
        'frontend': 'fas fa-code',
        'backend': 'fas fa-server',
        'mobile': 'fas fa-mobile-alt',
        'devops': 'fas fa-tools'
      };
      return icons[category] || 'fas fa-folder';
    },
    
    viewArticle(id) {
      this.$router.push(`/article/${id}`);
    },
    
    startWriting() {
      this.$router.push('/editor');
    },
    
    scrollToTop() {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    },
    
    refreshList() {
      this.fetchArticles();
    }
  },
  
  mounted() {
    this.fetchArticles();
    
    // 监听滚动以显示/隐藏工具栏
    window.addEventListener('scroll', () => {
      const toolbar = document.querySelector('.floating-toolbar');
      if (toolbar) {
        toolbar.style.opacity = window.scrollY > 300 ? '1' : '0';
      }
    });
  },
  
  beforeDestroy() {
    window.removeEventListener('scroll');
  }
}
</script>

<style scoped>
.articles-container {
  padding: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

/* 头部筛选区域 */
.articles-header {
  margin-bottom: 2rem;
}

.header-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.filter-tabs {
  display: flex;
  gap: 1rem;
}

.filter-tab {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  background: white;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-tab:hover {
  background: #f8f9fa;
  color: #1a237e;
}

.filter-tab.active {
  background: #1a237e;
  color: white;
}

.tag-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tag {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  background: white;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tag:hover {
  background: #f8f9fa;
  color: #1a237e;
}

.tag.active {
  background: #1a237e;
  color: white;
}

.tag-count {
  background: rgba(0, 0, 0, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 10px;
  font-size: 0.8rem;
}

/* 文章卡片 */
.article-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-details {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-weight: 500;
  color: #1a237e;
}

.post-time {
  font-size: 0.9rem;
  color: #666;
}

.article-stats {
  display: flex;
  gap: 1rem;
}

.stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
  font-size: 0.9rem;
}

.article-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a237e;
  margin-bottom: 1rem;
}

.article-excerpt {
  color: #666;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.article-cover {
  margin: 1rem 0;
  border-radius: 8px;
  overflow: hidden;
}

.article-cover img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.article-tags .tag {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  background: #f8f9fa;
  color: #666;
  font-size: 0.9rem;
}

.article-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.category-tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
}

.read-more {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  background: #1a237e;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.read-more:hover {
  background: #0d47a1;
  transform: translateX(5px);
}

/* 悬浮工具栏 */
.floating-toolbar {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.toolbar-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: white;
  color: #1a237e;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.toolbar-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.write-btn {
  width: auto;
  padding: 0 1.5rem;
  border-radius: 20px;
  background: #1a237e;
  color: white;
}

.write-btn:hover {
  background: #0d47a1;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .articles-container {
    padding: 1rem;
  }
  
  .header-filters {
    flex-direction: column;
    gap: 1rem;
  }
  
  .filter-tabs {
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }
  
  .article-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .floating-toolbar {
    right: 1rem;
    bottom: 1rem;
  }
}
</style> 